<template>
  <div style="width: 80%">
    <div style="font-size: 30px">课程基本信息添加</div>
    <div style="height: 50px"> </div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="课程名称">
        <el-input v-model="form.name" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="课程介绍">
        <el-input
          type="textarea"
          autosize
          placeholder="请输入课程介绍"
          v-model="form.description">
        </el-input>
      </el-form-item>
      <el-form-item label="选择课时">
        <el-col :span="8">
          <template>
            <el-input-number v-model="form.classhour" @change="handleChange" :min="1" :max="100"
                             label="描述文字"></el-input-number>
          </template>
        </el-col>
        <el-col class="line" :span="4">每课时时间(分钟)</el-col>
        <el-col :span="8">
          <template>
            <el-input-number v-model="form.classtime" @change="handleChange" :min="1" :max="100"
                             label="描述文字"></el-input-number>
          </template>
        </el-col>
      </el-form-item>
      <el-form-item label="课程时间">
        <el-col :span="8">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.start" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="1"> -至-</el-col>
        <el-col :span="8">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.end" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="选课时间">
        <el-col :span="8">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.cstart" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="1"> -至-</el-col>
        <el-col :span="8">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.cend" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="学习目标">
        <el-input
          type="textarea"
          autosize
          placeholder="请输入学习目标 "
          v-model="form.goal">
        </el-input>
      </el-form-item>
      <el-form-item label="考核标准">
        <el-input
          type="textarea"
          autosize
          placeholder="请输入考核标准 "
          v-model="form.assessmentid">
        </el-input>
      </el-form-item>
      <el-form-item label="参考教材">
        <el-input
          type="textarea"
          autosize
          placeholder="请输入参考教材 "
          v-model="form.referenceid">
        </el-input>
      </el-form-item>
      <el-form-item label="课程价格">
        <el-col :span="8">
          <template>
            <el-input-number v-model="form.price" @change="handleChange" :min="1" :max="10000"
                             label="描述文字"></el-input-number>
          </template>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import router from "../../router";

export default {
  data() {
    return {
      form: {
        name: '',
        description:'',
        classhour:'',
        classtime:'',
        start:'',
        cstart:'',
        cend:'',
        end:'',
        goal:'',
        assessmentid:'',
        referenceid:'',
        price:'',
        delivery: false,

      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.form)
      this.axios.post(this.baseUrl + "course/addcourse", this.form)
        .then(res => {
          this.$store.commit('addCourse', res.data.data);
          router.push("/teacher/teacher_course/teacher_coursepublishchapter")
        })
    },
    handleChange(value) {
      console.log(value);
    },
    handleClose(done) {
      this.$confirm('还有未保存的工作哦确定关闭吗？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
